<template>
  <div :style="{ padding: '0 0 32px 32px'}">
   <div id="echartWd" :style="{width: '800px', height: '300px'}"></div>
    <div id="echartSd" :style="{width: '800px', height: '300px'}"></div>
  </div>
</template>

<script>
  import { deleteAction,postAction,getAction,downFile } from '@/api/manage';
  export default {
    name: 'LineChartWsd',
    data() {},
    url:{
      list: "/apis/zxjEip2cHjwsd/getWsd",
    },
    methods: {
      //温度
        initChartWd (datas) {
          var myChart = this.$echarts.init(document.querySelector('#echartWd'));
          myChart.setOption({
            title: [{
              left: 'center',
              text: '温度'
            }],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                animation: false,
                label: {
                  backgroundColor: '#ccc',
                  borderColor: '#aaa',
                  borderWidth: 1,
                  shadowBlur: 0,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  textStyle: {
                    color: '#222'
                  }
                }
              },
              formatter: function (params) {
                return '时间：'+params[0].name+ '<br />温度：' +params[0].data;
              }
            },
            legend: {
              bottom: 10,
              data:['原材料库房','smt表面贴装','波峰焊','板卡检测','板卡库房','装置生产']
            },
            xAxis: {
              type: 'category',
              data:datas.cdate.map(item =>{
                var date = new Date(item);
                let hour,minute;
                if (date.getHours()<10){
                  hour="0" + date.getHours();
                }else {
                  hour=date.getHours();
                }
                if (date.getMinutes()<10){
                  minute="0" + date.getMinutes();
                }else {
                  minute=date.getMinutes();
                }
                return hour+':'+minute;
              }),
              axisLabel: {
                formatter: function (value, idx) {
                  return value;
                }
              },
              splitLine: {
                show: false
              },
              boundaryGap: false
            },
            yAxis: {
              type: 'value',
              splitArea:{
                show:true
              },
              axisLabel: {
                formatter: function (value, idx) {
                  return value+'℃';
                }
              }
            },
            series:[
              {
                name:'原材料库房',
                data:datas.wdm.yclkfWd,
                type: 'line'
            },
              {
                name:'smt表面贴装',
                data:datas.wdm.smtWd,
                type: 'line'
              },
              {
                name:'波峰焊',
                data:datas.wdm.bfhWd,
                type: 'line'
              },
              {
                name:'板卡检测',
                data:datas.wdm.bkjcWd,
                type: 'line'
              },
              {
                name:'板卡库房',
                data:datas.wdm.bkkfWd,
                type: 'line'
              },
              {
                name:'装置生产',
                data:datas.wdm.zzscWd,
                type: 'line'
              }
            ]
          });
        },
      //湿度
      initChartSd (datas) {
        var myChart = this.$echarts.init(document.querySelector('#echartSd'));
        myChart.setOption({
          title: [{
            left: 'center',
            text: '湿度'
          }],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              animation: false,
              label: {
                backgroundColor: '#ccc',
                borderColor: '#aaa',
                borderWidth: 1,
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                textStyle: {
                  color: '#222'
                }
              }
            },
            formatter: function (params) {
              return '时间：'+params[0].name+ '<br />湿度：' +params[0].data;
            }
          },
          legend: {
            bottom: 10,
            data:['原材料库房','smt表面贴装','波峰焊','板卡检测','板卡库房','装置生产']
          },
          xAxis: {
            type: 'category',
            data:datas.cdate.map(item =>{
              var date = new Date(item);
              let hour,minute;
              if (date.getHours()<10){
                hour="0" + date.getHours();
              }else {
                hour=date.getHours();
              }
              if (date.getMinutes()<10){
                minute="0" + date.getMinutes();
              }else {
                minute=date.getMinutes();
              }
              return hour+':'+minute;
            }),
            axisLabel: {
              formatter: function (value, idx) {
                return value;
              }
            },
            splitLine: {
              show: false
            },
            boundaryGap: false
          },
          yAxis: {
            type: 'value',
            axisTick:{
              length:2
            },
            axisLabel: {
              formatter: function (value, idx) {
                return value+'RH';
              }
            }
          },
          series:[
            {
              name:'原材料库房',
              data:datas.wsm.yclkfSd,
              type: 'line'
            },
            {
              name:'smt表面贴装',
              data:datas.wsm.smtSd,
              type: 'line'
            },
            {
              name:'波峰焊',
              data:datas.wsm.bfhSd,
              type: 'line'
            },
            {
              name:'板卡检测',
              data:datas.wsm.bkjcSd,
              type: 'line'
            },
            {
              name:'板卡库房',
              data:datas.wsm.bkkfSd,
              type: 'line'
            },
            {
              name:'装置生产',
              data:datas.wsm.zzscSd,
              type: 'line'
            }
          ]
        });
      }
    },
    mounted () {
      this.timer = setInterval(()=>{getAction('/apis/zxjEip2cHjwsd/getWsd','').then((res)=>{
        if(res.success){
          this.initChartWd(res.result);
          this.initChartSd(res.result);
        }
      })}, 2000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }

  }
</script>

<style scoped>

</style>